<template>
  <div class="socket">



    <div class="msg">


      <div class="left">
        <div v-for="(item, index) in toMsg" :key="index">
          <p style="margin: 10px 0; width: 100%; height: 50px; margin-top: 50px;">
            <img style="float: left;" width="50" src="https://fastly.jsdelivr.net/npm/@vant/assets/logo.png"/>
            <span class="span">{{ item.msg }}</span>
          </p>
        </div>
      </div>


      <div class="right">
        <div v-for="(item, index) in fromMsg" :key="index">
          <p style="margin: 10px 0; width: 100%; height: 50px;margin-bottom: 50px;">
            <img style="float: right;" width="30" src="https://pinia.vuejs.org/logo.svg"/>
            <span style="float: right;" class="span">{{ item.msg }}</span>
          </p>
        </div>
      </div>

    </div>




    <div class="input">
      <el-row>
        <el-col :span="20">
          <el-input v-model="msg"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button style="width: 132px;" @click="sendMsg">发送</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { io } from "socket.io-client";
const socket = io("http://localhost:3000");

let msg = ref('')

let fromMsg:any = reactive([])
const sendMsg = () => {
  let message = {name: "大大怪",msg: msg.value}
  socket.emit('token', message)
  console.log(message);
  fromMsg.push(message)
  msg.value = ''
}

let toMsg:any = reactive([])
onMounted(() => {
  socket.on("token", (res) => {
    console.log(res,'服务端发送过来的数据');
    toMsg.push(res)
  });
  console.log(toMsg);
})
</script>
<style scoped>
.msg{
  width: 100%;
  height: 50px;
}
.socket {
  width: 100%;
  height: 450px;
  position: relative;
}
.msg{
  width: 100%;
  height: 400px;
  background-color: #F2F2F2;
  overflow: hidden;
  overflow-y: auto;
}
.input {
  width: 100%;
  position: absolute;
  bottom: 0;
}
.left{
  width: 50%;
  float: left;
}
.right{
  width: 50%;
  float: right;
}
.left .span{
  display: inline-block;
  padding: 10px;
  background-color: rgb(184, 204, 241);
  border-radius: 20px;
}

.right .span{
  display: inline-block;
  padding: 10px;
  background-color: rgb(226, 244, 208);
  border-radius: 20px;
}
</style>
